From bb2f79e09dd4776d611e4751ede1cbb43340fba0 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 16 Dec 2023 17:31:12 +0100 Subject: fix(build): handle Next.js errors and warnings during build * extract Blog component from BlogPage (paginated) and extract Article component from ArticlePage to avoid `Cannot read properties` errors due to fallback route * fix sitemap build (cjs not supported) * fix eslint warnings (react/jsx-no-literals) * update `start` script since I'm using standalone output * update `postbuild` script since we need to copy public and static files to standalone directory (Next.js does not handle it itself because we should use a CDN...) --- src/pages/article/[slug].tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/pages/article/[slug].tsx') diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index e18de75..ecff692 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -3,7 +3,7 @@ import type { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import { useCallback } from 'react'; +import { type FC, useCallback } from 'react'; import { useIntl } from 'react-intl'; import { getLayout, @@ -60,12 +60,8 @@ type ArticlePageProps = { translation: Messages; }; -/** - * Article page. - */ -const ArticlePage: NextPageWithLayout = ({ data }) => { +const Article: FC> = ({ data }) => { const intl = useIntl(); - const { isFallback } = useRouter(); const { article, isLoading } = useArticle(data.post.slug, data.post); const { comments, isLoading: areCommentsLoading } = useComments({ fallback: data.comments, @@ -137,7 +133,7 @@ const ArticlePage: NextPageWithLayout = ({ data }) => { [] ); - if (isFallback || isLoading) return ; + if (isLoading) return ; const { content, id, intro, meta, slug, title } = article; const { @@ -276,6 +272,15 @@ const ArticlePage: NextPageWithLayout = ({ data }) => { ); }; +/** + * Article page. + */ +const ArticlePage: NextPageWithLayout = ({ data }) => { + const { isFallback } = useRouter(); + + return isFallback ? :
; +}; + ArticlePage.getLayout = (page) => getLayout(page); type PostParams = { -- cgit v1.2.3